我們已經探索了 Tauri 中許多與使用者直接互動的功能，例如視窗、選單和對話框。今天，我們將學習一個非常強大的功能：Deep Link (深度連結)。這個功能讓你的應用程式可以響應來自外部的 URL 請求，從而實現應用程式之間的無縫跳轉和資料傳遞，是打造整合性使用者體驗的關鍵。

什麼是 Deep Link？

不知道大家有沒有過這樣的經驗：你在網頁上點擊了一個連結，不是開啟一個新的瀏覽器分頁，而是直接啟動了你電腦上安裝的某個應用程式，並跳轉到特定頁面或執行特定操作。這裡所使用的技術就是 Deep Link。

對於桌面應用程式，這通常是透過自訂的 URL 協定 (URL Scheme) 來實現的，例如 myapp://user/profile。對於行動應用程式，則可以透過 Universal Links (iOS) 或 App Links (Android) 讓 https://your-domain.com/user/profile 這樣的網址直接在 App 中開啟。

Deep Link 的應用場景非常廣泛，例如：

• OAuth 認證：使用者在瀏覽器中完成第三方登入（如 Google 或 GitHub），然後被重新導向回你的 Tauri 應用程式，並攜帶認證成功的 token。
• 從網頁啟動應用：在你的產品介紹網頁上，提供一個「在應用程式中開啟」的按鈕，讓使用者可以無縫切換到桌面端。
• 應用程式間整合：你的應用程式可以被其他應用程式透過 URL 呼叫，並傳遞參數來執行特定任務。

如何安裝 plugin-deep-link

一如既往，只要簡單的一個指令就可以安裝了：

npm run tauri add deep-link

設定自訂 URL Scheme

安裝完成後，我們需要在 tauri.conf.json 中告訴 Tauri 我們的應用程式要響應哪一種 URL 協定。

在 plugins 物件中加入 deep-link 的設定。對於桌面應用，我們主要設定 schemes。

// tauri.conf.json
{
  "plugins": {
    "deep-link": {
      "desktop": {
        "schemes": ["ithome", "myapp"]
      }
    }
  }
}

這個設定告訴作業系統，當使用者點擊 ithome:// 或 myapp:// 開頭的連結時，應該啟動我們的應用程式。選擇協定名稱時，建議使用應用程式的品牌名稱或功能特徵，確保獨特性並避免與其他應用衝突。

監聽傳入的 URL

設定好了，接下來就是要讓應用程式能夠接收並處理這些傳入的 URL。我們可以在前端的 JavaScript/TypeScript 程式碼中監聽事件。

plugin-deep-link 提供了兩個主要的函式：

• getCurrent(): 檢查應用程式是否是透過 Deep Link 啟動的。如果是，它會回傳啟動的 URL。這對於處理應用程式剛開啟時的狀態非常有用。
• onOpenUrl(): 註冊一個監聽器，當應用程式已經在執行中，又有新的 Deep Link 請求傳入時，這個監聽器就會被觸發。

import { getCurrent, onOpenUrl } from '@tauri-apps/plugin-deep-link';

onMounted(async () => {
  testDeepLink();

  // 監聽新的 Deep Link 請求
  await onOpenUrl((urls) => {
    console.log('deep link:', urls);
    // 處理傳入的 URLs
  });
})

const testDeepLink = async () => {
  // 檢查是否透過 Deep Link 啟動
  const startUrls = await getCurrent();
  console.log('startUrls:', startUrls);
  if (startUrls) {
    console.log('應用程式透過 Deep Link 啟動:', startUrls);
  }
};

當然，也可以在後端 Rust 監聽：

use tauri_plugin_deep_link::DeepLinkExt;

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_deep_link::init())
        .setup(|app| {
            // 檢查是否透過 Deep Link 啟動
            let start_urls = app.deep_link().get_current()?;
            if let Some(urls) = start_urls {
                println!("應用程式透過 Deep Link 啟動: {:?}", urls);
            }

            // 監聽新的 Deep Link 請求
            app.deep_link().on_open_url(|event| {
                println!("收到新的 Deep Link: {:?}", event.urls());
            });
            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

單一應用程式

在 Windows 和 Linux 上，每次點擊 Deep Link 都可能會嘗試開啟一個新的應用程式實例。這通常不是我們想要的行為。為了確保只有一個應用程式實例在執行，並讓新的 Deep Link 請求被導向到現有的實例，我們通常需要搭配使用 Single Instance 這個 plugin。

雖然說要使用 Single Instance，但也不需要另外再下指令安裝，只是需要調整一下 Cargo.toml 設定：

[target."cfg(any(target_os = \"macos\", windows, target_os = \"linux\"))".dependencies]
tauri-plugin-single-instance = { version = "2.0.0", features = ["deep-link"] }

並且 Single Instance 必須是第一個註冊的 Plugin

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    let mut builder = tauri::Builder::default();

    #[cfg(desktop)]
    {
        builder = builder.plugin(tauri_plugin_single_instance::init(|_app, argv, _cwd| {
          println!("a new app instance was opened with {argv:?} and the deep link event was already triggered");
          // when defining deep link schemes at runtime, you must also check `argv` here
        }));
    }

    builder
        .plugin(tauri_plugin_deep_link::init())
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

安裝 Deep Link 時機

需要注意的是，預設只有再安裝應用程式的時候才會設定 Deep Link。換句話說，上面那些設定在開發階段 (npm run tauri dev) 是測不出來的，在開發相關功能時會有一點麻煩。

不過，對於 Windows 和 Linux 系統，Tauri 有提供 register 這個 Rust 函式，讓我們可以執行時設定 Deep Link：

// lib.rs
use tauri_plugin_deep_link::DeepLinkExt;

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_deep_link::init())
        .setup(|app| {
            #[cfg(desktop)]
            app.deep_link().register("my-app")?;
            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

這樣之後就可以用 my-app://* URL 了。

簡單範例

首先，讓我們透過 register 設定 ithome 這個 Deep Link：

.setup(|app| {
    #[cfg(desktop)]
    app.deep_link().register("ithome")?;
    Ok(())
})

接下來，在瀏覽器隨便輸入 ithome:// 開頭的 URL

如果懶得使用瀏覽器觸發，也可以直接在 terminal 輸入指令觸發：

start ithome://12345

觸發後，就可以看到前端有監聽到了：

小結

Deep Link 讓應用程式能夠響應外部 URL 請求，實現與網頁服務和其他應用程式的無縫整合。透過 tauri-plugin-deep-link，我們學會了在 tauri.conf.json 中配置 URL schemes，使用 getCurrent() 和 onOpenUrl() 處理傳入連結，以及搭配 Single Instance 避免多重實例問題。

這些功能讓我們能夠打造出與外部世界緊密連結的 Tauri 應用程式，無論是 OAuth 認證、跨應用呼叫或從網頁啟動桌面應用，Deep Link 都是實現整合體驗的關鍵技術。